<template>
  <div class="link">
    <crumbs :bread="bread" :content-top="false">
      <template #content>
        <div class="list-common list-header">
          <div>链接标题</div>
          <div class="date">时间</div>
        </div>

        <div class="list-common list-body">
          <a :href="item.functionUrl ? item.functionUrl : 'javascript:;'" target="_blank" v-for="(item, idx) in dataSource" :key="idx" :title="item.functionName">
            <span class="name">{{ item.functionName }}</span>
            <div class="date">
              <span>[{{ $moment(item.createTime).format("YYYY-MM-DD") }}]</span>
            </div>
          </a>
        </div>
      </template>
    </crumbs>
  </div>
</template>

<script lang="ts">
import Base from "@/controllers/base.ts";
import { Component } from "vue-property-decorator";
import { Pagination } from "ant-design-vue";
import Crumbs from "@/components/Crumbs/index.vue";

@Component({
  name: "Link",
  components: {
    Crumbs,
    APagination: Pagination
  }
})
export default class Notice extends Base {
  private dataSource: any[] = [];

  private created() {
    this._created();
    this.getLinkList();
  }

  private async getLinkList() {
    const res = await this.$api.IntservLink();
    if (res && res.code === 200) {
      this.dataSource = res.data;
    }
    return res;
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.link {
  .search {
    width: 270px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    text-align: center;
    background: url("~@/assets/images/bg-15.png") 70px center no-repeat;

    // &:focus,
    &.no-bg {
      background: none;
    }
  }

  .list-common {
    .date {
      width: 160px;
      justify-content: center;
      position: relative;
      display: flex;
      align-items: center;
    }
  }

  .list-body {
    padding-top: 4px;
  }

  .list-body a {
    line-height: 150%;
    display: flex;
    padding-left: 30px;
    // padding-right: 30px;
    position: relative;
    justify-content: space-between;
    // margin-top: 10px;
    .scale(padding-top, 10px);
    .scale(padding-bottom, 10px);

    &::after {
      content: "";
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 4px;
      background-color: #b6b7b8;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
    &:last-child {
      margin-bottom: 0;
    }
    &:link {
      color: #464b55;
    }

    &:hover {
      background-color: #f6f6fa;
      color: #3059ba;

      &::after {
        background-color: #3059ba;
      }
    }

    .name {
      width: 55%;
      flex-shrink: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    padding-left: 30px;
    height: 36px;
    background: linear-gradient(0deg, #4b9cea 0%, #66b0f2 100%);
    border-radius: 2px;
    color: white;
    margin-top: 16px;

    .date {
      &::before {
        content: "";
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        position: absolute;
        height: 14px;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.39);
      }
    }

    .iconsanjiao3-copy {
      font-size: 9px;
      margin-left: 10px;
      transition-duration: 0.3s;

      &.asc {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
